<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的会诊订单</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/animate.min.css" rel="stylesheet">
</head>
<body>
	<table id="MyOrdertab" class="table table-hover"></table>
	<!-- 会诊订单详情页 -->
	<div class="modal inmodal fade" id="detailsModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:800px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">会诊订单详情</h4>
               	</div>
                <div class="modal-body">
                	<h2>订单详情！</h2>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
           		</div>
           	</div>
        </div>
	</div>
    <!-- 付款类型选择-->
    <div class="modal inmodal fade" id="alipayModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:800px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">订单结算</h4>
               	</div>
                <div class="modal-body">
                	<input type="hidden" id="hosporderid" name="hosporderid"/>
                	<div class="row">
                		<div class="col-sm-12">
                			<div class="radio i-checks">
                            	<label><input type="radio" value="1" name="radiopay" checked="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="${pageContext.request.contextPath }/bootstrapStyle/img/alipay.jpg" style="width:230px;height:75px;"/></label>
                            </div>
                		</div>
                		<div class="col-sm-12">
                			<div class="radio i-checks">
                            	<label><input type="radio" value="2" name="radiopay"><img src="${pageContext.request.contextPath }/bootstrapStyle/img/wechatpay.jpg" style="width:300px;"/></label>
                            </div>
                		</div>
                	</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button class="btn btn-primary" onclick="return alipaySubmit()" id="alipayBtn">提交支付</button>
           		</div>
           	</div>
        </div>
	</div>
	<!-- 付款成功与否提示 -->
	<div class="modal inmodal fade" id="alipayIsOk" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:800px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">支付结果</h4>
               	</div>
                <div class="modal-body">
	                <div align="center">
	                	<button class="btn btn-primary" data-dismiss="modal" onclick="paysuccess()">支付成功</button>
                		<button class="btn btn-white" data-dismiss="modal" onclick="payerror()">支付失败</button>
	                </div>
                </div>
				<!-- <div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
           		</div> -->
           	</div>
        </div>
	</div>
	<div class="modal inmodal fade" id="WeiXinPay" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:900px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">微信支付</h4>
               	</div>
                <div class="modal-body">
	                <div align="center" id="zhifu">
	                	<div class="ibox">
		                    <div class="ibox-title">
		                        <h5>微信支付&nbsp;&nbsp;&nbsp;<small>手机扫描图中二维码，实现支付</small></h5>
		                        <h5 class="modal-title">当前支付时间还有<a id="time"></a>&nbsp;&nbsp;秒</h5>
		                    </div>
		                    <div class="ibox-content">
		                    	<div class="row">
			                		<div class="col-sm-7">
			                			<div id="qrcode" style="width:200px; height:200px; margin-top:90px;" align="left"></div>
			                		</div>
			                		<div class="col-sm-5">
			                			<img src="${pageContext.request.contextPath }/bootstrapStyle/img/weixin_pay.jpg"/>
			                		</div>
			                	</div>
		                    </div>
		                </div>
	                </div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
           		</div>
           	</div>
        </div>
	</div>
    <div class="modal inmodal fade" id="WeiXinPayBack" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:900px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">支付反馈</h4>
               	</div>
                <div class="modal-body">
	                <div align="center">
	                	<H3 id="Status"></H3>
	                </div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
           		</div>
           	</div>
        </div>
	</div>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery-confirm.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/bootstrapStyle/js/qrcode.js"></script>
    <script>
    //var InterValObjR; //timer变量，控制时间
	var countR = 30; //间隔函数，1秒执行,服务器是30s
	var curCountR;//当前剩余秒数
	
    var qrcode = new QRCode(document.getElementById("qrcode"), {
    	width : 200,
    	height : 200
    });
	  	//根据窗口调整表格高度
	    $(window).resize(function() {
	        $('#MyOrdertab').bootstrapTable('resetView', {
	            height: tableHeight()
	        })
	    })
	    //生成用户数据
	    $('#MyOrdertab').bootstrapTable({
	        method: 'get',
	        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
	        url:"${pageContext.request.contextPath}/Main/doctor/MyOrderListAjax.action",//要请求数据的文件路径
	        height:tableHeight(),//高度调整
	        striped: true, //是否显示行间隔色
	        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
	        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
	        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
	        pageNumber: 1, //初始化加载第一页，默认第一页
	        pagination:true,//是否分页
	        queryParamsType:'limit',//查询参数组织方式
	        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
	            return {//这里的params是table提供的    
	                offset : params.offset,//从数据库第几条记录开始    
	                limit : params.limit,
	                type:null
	            //找多少条    
	            };},//请求服务器时所传的参数
	        sidePagination:'server',//指定服务器端分页
	        pageSize:10,//单页记录数
	        pageList:[10,30,50,100],//分页步进值
	        showRefresh:true,//刷新按钮
	        showColumns:true,
	        clickToSelect: true,//是否启用点击选中行
	        toolbarAlign:'right',//工具栏对齐方式
	        buttonsAlign:'right',//按钮对齐方式
	        toolbar:'#toolbar',//指定工作栏
	        columns:[
	            {
	                title:'全选',
	                field:'select',
	                //复选框
	                checkbox:true,
	                width:25,
	                align:'center',
	                valign:'middle'
	            },
	            {
	                title:'会诊订单ID',
	                field:'hosporderid',
	                visible:true
	            },
	            {
	                title:'会诊医生姓名',
	                field:'docname',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'会诊医生性别',
	                field:'docmale',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'预约医生职称',
	                field:'doctitle',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'医院下单时间',
	                field:'orderptime',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'医生接单时间',
	                field:'orderrtime',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'预约医生何时会诊',
	                field:'orderstime',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'医院给出的总价',
	                field:'ordertotalhospprice',
	                sortable:true,
	                formatter:nullChange1
	            },
	            {
	                title:'医生给出的总价',
	                field:'ordertotaldoctorprice',
	                sortable:true,
	                formatter:nullChange1
	            },
	            {
	                title:'状态',
	                field:'hosporderstatename',
	                align:'center',
	                //列数据格式化
	                //formatter:operateFormatter
	            },
	            {
	                title:'操作',
	                field:'orderstate',
	                align:'center',
	                //列数据格式化
	                formatter:operateConfirm
	            }
	        ],
	        locale:'zh-CN',//中文支持,
	        responseHandler:function(rows){
	            //在ajax获取到数据，渲染表格之前，修改数据源
	            return rows;
	        }
		})
		//对接收的数据作规范化，为空就显示“未填写”
		function nullChange(value,row,index){
			if(value=='null'){
				return '未填写'
			}else{
				return value;
			}
		}
	    function nullChange1(value,row,index){
			if(value=='0.0'){
				return '未填写'
			}else{
				return value;
			}
		}
		//对订单操作列添加操作标签
	    function operateConfirm(value,row,index){
			if(value=="2"){
				return '<button class="btn btn-info" style="height:30px" onclick="Details('+row.hosporderid+')">详情</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-primary" style="height:30px" onclick="OrderSettle('+row.hosporderid+')">订单付款</button>';
				//return '<a target="_Blank" href="${pageContext.request.contextPath}/Main/doctor/OrderSettle.action?hosporderid=55">支付</a>'
			}else if(value=="3"){
				return '<button class="btn btn-info" style="height:30px" onclick="Details('+row.hosporderid+')">详情</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-warning" style="height:30px" id="endorder'+row.hosporderid+'" onclick="EndOrder('+row.hosporderid+')">结束订单</button>';
			}else{
				return '<button class="btn btn-info" style="height:30px" onclick="Details('+row.hosporderid+')">详情</button>';
			}
	    }
		//阿里支付提交按钮
		function alipaySubmit(){
			var radiopay=$('input:radio[name="radiopay"]:checked').val();
			var hosporderid=$("#hosporderid").val();
			//alert(radio);
			if(radiopay==1){
				window.open("${pageContext.request.contextPath}/Main/doctor/OrderSettle.action?hosporderid="+hosporderid+"&type="+radiopay);
				$('#alipayIsOk').modal('show');
				$('#alipayModal').modal('hide');
			}else if(radiopay==2){
				$("#alipayBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
	    		$("#alipayBtn").prop('disabled',true);
	    		$.ajax({
	        		type:'post',
	        		url:"${pageContext.request.contextPath}/Main/doctor/OrderSettleWeiXin.action?hosporderid="+hosporderid+"&type="+radiopay,
	        		async: true,
	        		success:function(data){
	        			$("#alipayBtn").html('提交支付');
    		    		$("#alipayBtn").prop('disabled',false);
	        			//$.alert(data.msg);
	        			if(data.code==100){
	        				qrcode.makeCode(data.code_url);
	        				curCountR = countR;
	        				$("#time").html(curCountR);
	        				$("#WeiXinPay").modal("show");
	        				var WXpayTimeOut=setInterval(function(){
	        					$.ajax({
	        						type:"post",
	        						url:"${pageContext.request.contextPath}/Main/doctor/getWXpaystatus.action",
	        						async:true,
	        						data:"payid="+data.payid,
	        						success:function(data){
	        							if(data.code=="100"){
	        								if(data.paystatus=="2" || data.paystatus=="3"){
	        									$("#Status").html(showvalue(data.paystatus));
	        									$('#WeiXinPay').modal('hide');
	        									$('#alipayModal').modal('hide');
	        									$('#WeiXinPayBack').modal('show');
	        									clearInterval(WXpayTimeOut);
	        									refreshTab();
	        								}else{
	        									if(curCountR == 0){
		        									$("#Status").html("交易超时，请重试！");
		        									$('#WeiXinPay').modal('hide');
		        									$('#WeiXinPayBack').modal('show');
		        									//clearInterval(WXpayTimeOut);
		        									//refreshTab();
		        								}
	        								}
	        							}
	        						},error:function(request){
	        							alert("订单状态获取失败");
        								clearInterval(WXpayTimeOut);
	        						}
	        					});
	        					if (curCountR == 0) {                
	        						clearInterval(WXpayTimeOut);//停止计时器
	        						$('#WeiXinPay').modal('hide');
	        					}else {
	        						curCountR--;
	        						$("#time").html(curCountR);
	        					}
	        				},1000);
	        				//setTimeout(function(){clearInterval(WXpayTimeOut)}, 3000);
	        			}else{
	        				$.alert(data.msg);
	        			}
	        		},error:function(request){
	        			$.alert("向服务器请求失败！");
	        			$("#alipayBtn").html('提交支付');
    		    		$("#alipayBtn").prop('disabled',false);
	        		}
	        	})
			}
		}
		function showvalue(key){
			if(key=="2"){
				return "支付失败";
			}else{
				return "支付成功";
			}
		}
	    //查询按钮事件
	    $('#search_btn').click(function(){
	        $('#MyOrdertab').bootstrapTable('refresh', {url: '#'});
	    })
	    //tableHeight函数
	    function tableHeight(){
	        //可以根据自己页面情况进行调整
	        return $(window).height();
	    }
	    function refreshTab(){
	  		$('#MyOrdertab').bootstrapTable('refresh');
	  	}
        function OrderSettle(hosporderid){
        	$("#alipayModal").modal("show");
        	$("#hosporderid").val(hosporderid);
        }
        function paysuccess(){
        	refreshTab();
        }
        function payerror(){
        	refreshTab();
        }
        function EndOrder(hosporderid){
        	$.confirm({
    		    title: '提示!',
    		    content: '你确定结束该订单？请确保医生已就诊过！',
    		    type: 'blue',
    		    typeAnimated: true,
    		    buttons: {
    		    	确定: function () {
    		    		$("#endorder"+hosporderid).html('<i class="fa fa-spinner fa-spin"></i>处理中...');
    		    		$("#endorder"+hosporderid).prop('disabled',true);
    		    		$.ajax({
    		        		type:'post',
    		        		url:"${pageContext.request.contextPath}/Main/doctor/finishpreorder.action",
    		        		data:"hosporderid="+hosporderid,
    		        		async: true,
    		        		success:function(data){
    		        			$("#endorder"+hosporderid).html('结束订单');
    	    		    		$("#endorder"+hosporderid).prop('disabled',false);
    		        			$.alert(data.msg);
    		        			if(data.code==100){
    		        				refreshTab();
    		        			}
    		        		},error:function(request){
    		        			$.alert("向服务器请求失败！");
    		        			$("#endorder"+hosporderid).html('结束订单');
    	    		    		$("#endorder"+hosporderid).prop('disabled',false);
    		        		}
    		        	})
    		    	},
    				取消: function () {},
    		    }	
    		});
        }
        //会诊订单详情
        function Details(hosporderid){
        	//alert(hosporderid);
        	$("#detailsModal").modal("show");
        }
    </script>
</body>
</html>